<template>
	<view class="content">
		<view class="cardViewItem margin-top-sm padding-sm bg-white radius flex" v-for="(item,index) in dataList" :key="index"
			@click="goToHome(item)">
			<view class="cardImage">
				<image :src="item.imageUrl" mode="scaleToFill" />
			</view>

			<view class="margin-left text-black">
				<view>{{item.companyName}}</view>
				<view>{{item.name}} {{item.phone}}</view>
				<view>{{item.position}}</view>
			</view>

			<view class="cardBtnView">
				<view class="cardBtn">
					<image src="../../static/home/ddh.png" mode="scaleToFill" />
				</view>
				<view class="cardBtn">
					<image src="../../static/home/jtxl.png" mode="scaleToFill" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 名片夹列表
				dataList: [],
			}
		},
		onLoad() {

		},
		onShow() {
			const vm = this;

			// 获取名片夹列表
			vm.getBusinessCardList();
		},
		methods: {
			// 获取名片夹列表
			getBusinessCardList() {
				const vm = this;
				vm.$api.getBusinessCardList().then(res => {
					console.log(res)
					vm.dataList = res;
				})
			},

			// 去首页
			goToHome(item) {
				global.cardItemId = item.id;

				uni.switchTab({
					url: "/pages/home/index"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {}

	.cardImage {
		width: 100rpx;
		height: 100rpx;
		border-radius: 9999rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.cardViewItem {
		position: relative;

		.cardBtnView {
			position: absolute;
			display: flex;

			bottom: 16rpx;
			right: 20rpx;

			.cardBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				height: 60rpx;
				border: 1px solid #cbcbcb;
				border-radius: 10rpx;
				background-color: #f1f1f1;
				margin-left: 10rpx;

				image {
					width: 46rpx;
					height: 46rpx;
				}
			}
		}
	}
</style>